<script setup>
    import menu1 from '../assets/images/menu1.png';
    import menu2 from '../assets/images/menu2.png';
    import menu3 from '../assets/images/menu3.png';
    import menu4 from '../assets/images/menu4.png';
    import menu5 from '../assets/images/menu5.png';
    import menu6 from '../assets/images/menu6.png';
    import menu7 from '../assets/images/menu7.png';
    import menu8 from '../assets/images/menu8.png';
    import menu9 from '../assets/images/menu9.png';
    import menu10 from '../assets/images/menu10.png';

const menuList =[
    {text: '果蔬鲜花', url: menu1 },
    {text: '禽肉蛋品', url: menu2 },
    {text: '海鲜水产', url: menu3 },
    {text: '乳品烘焙', url: menu4 },
    {text: '粮油面点', url: menu5 },
    {text: '百货家电', url: menu6 },
    {text: '酒水饮料', url: menu7 },
    {text: '美妆护肤', url: menu8 },
    {text: '纸品清洁', url: menu9 },
    {text: '更多', url: menu10 },
]
</script>

<template>
    <div class = "home-gird">
        <van-grid square :column-num="5">
            <van-grid-item
                v-for="list in menuList"
                :key= "list"
                >
                <van-image :src="list.url" />
                <span>{{ list.text }}</span>
            </van-grid-item>
        </van-grid>

    </div>
</template>

<style lang = "scss" scoped>
    .home-gird{
        .van-image{
            width: 55%;
        }
        span {
            margin-top: 5px;
            font-size: 12px;
        }
    }
</style>